<template>
	<view class="pics">
		<scroll-view scroll-y="true" class="pics_scroll_content">
			<view 
			v-for="(item,index) in PicGateData" 
			:key="item.id"
			@click="handleClick(index,item.id)"
			:class="{active:currentIndex==index}"
			>{{item.title}}</view>
		</scroll-view>
		<scroll-view scroll-y="true" class="pics_scroll_detail">
			<view class="right" v-for="(item,index) in rightData" :key="item.id">
				<image :src="item.img_url" @click="previewIamge(index)"></image>
				<text>{{item.zhaiyao}}</text>
			</view>
			<view v-if="rightData.length === 0">
				该商品没有内容
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				PicGateData:[],
				currentIndex:0,
				rightData:[]
			}
		},
		methods: {
			async getPicGate(){
				const res = await this.$request({
					url:"/api/getimgcategory"
				})
				this.PicGateData = res.data.message
				// 页面一进来就显示二级
				this.handleClick(0,this.PicGateData[0].id)
			},
			async handleClick(index,id){
				this.currentIndex = index
				const res = await this.$request({
					url:`/api/getimages/${id}`
				})
				this.rightData = res.data.message
			},
			previewIamge(current){
				// map有返回值   forEach没有返回值
				const urls = this.rightData.map(item => {return item.img_url})
				uni.previewImage({
					current,
					urls
				})
			}
		},
		onLoad() {
			this.getPicGate()
		}
		
	}
</script>

<style lang="less" scoped>
.pics{
	display: flex;
	.pics_scroll_content{
		flex:2;
		height: 100vh;
		view{
			line-height: 100rpx;
			border-bottom: 1rpx solid #eee;
			font-size: 28rpx;
			text-align: center;
		}
		.active{
			background-color: #b50e03;
			color: #FFFFFF;
		}
	}
	.pics_scroll_detail{
		flex: 5;
		height: 100vh;
		.right{
			image{
				width: 100%;
			}
			text{
				font-size: 24rpx;
				margin: 20rpx;
			}
		}
	}
}
</style>
